<template>
    <div class="flexbox flexcenter">
        <div class="count_box flexbox flexcolumn flexjust">
            <div class="count_title">广告账户</div>
            <div class="count_num">{{dataForm.advertiser_ids.length}}</div>
        </div>
        <svg width="20" height="21" class="count_icon" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g opacity="0.5">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 5.08333L15.4167 3L10 8.41667L4.58336 3L2.50003 5.08333L7.9167 10.5L2.50003 15.9167L4.58336 18L10 12.5833L15.4167 18L17.5 15.9167L12.0834 10.5L17.5 5.08333Z" fill="#165DFF" />
            </g>
        </svg>
        <div class="count_box flexbox flexcolumn flexjust" v-if="subFrom.crea_type==1">
            <div class="count_title">广告系列</div>
            <div class="count_num">1</div>
        </div>
         <div class="count_box flexbox flexcolumn flexjust" v-if="subFrom.crea_type==2 && dataForm.campaign.campaign_id">
            <div class="count_title">广告系列</div>
            <div class="count_num">1</div>
        </div>
        <svg  v-if="subFrom.crea_type==2 && dataForm.campaign.campaign_id" width="20" height="21" class="count_icon" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g opacity="0.5">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 5.08333L15.4167 3L10 8.41667L4.58336 3L2.50003 5.08333L7.9167 10.5L2.50003 15.9167L4.58336 18L10 12.5833L15.4167 18L17.5 15.9167L12.0834 10.5L17.5 5.08333Z" fill="#165DFF" />
            </g>
        </svg>
        <div class="count_box flexbox flexcolumn flexjust" v-if="subFrom.crea_type==2 && dataForm.campaign.campaign_id">
            <div class="count_title">创意素材</div>
            <div class="count_num">{{dataForm.creatives_base.creatives_class.length}}</div>
        </div>
        <div class="count_box flexbox flexcolumn flexjust" v-if="subFrom.crea_type==2 && !dataForm.campaign.campaign_id">
            <div class="count_title">广告系列/创意素材</div>
            <div class="count_num">{{dataForm.creatives_base.creatives_class.length}}</div>
        </div>
        <svg width="20" height="21" class="count_icon" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g opacity="0.5">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 5.08333L15.4167 3L10 8.41667L4.58336 3L2.50003 5.08333L7.9167 10.5L2.50003 15.9167L4.58336 18L10 12.5833L15.4167 18L17.5 15.9167L12.0834 10.5L17.5 5.08333Z" fill="#165DFF" />
            </g>
        </svg>
        <div class="count_box flexbox flexcolumn flexjust">
            <div class="count_title">预算和出价优化组</div>
            <div class="count_num">{{dataForm.adgroup.delivery.length}}</div>
        </div>
        <svg width="20" height="21" class="count_icon" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g opacity="0.5">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 5.08333L15.4167 3L10 8.41667L4.58336 3L2.50003 5.08333L7.9167 10.5L2.50003 15.9167L4.58336 18L10 12.5833L15.4167 18L17.5 15.9167L12.0834 10.5L17.5 5.08333Z" fill="#165DFF" />
            </g>
        </svg>
        <div class="count_box flexbox flexcolumn flexjust">
            <div class="count_title">定向组</div>
            <div class="count_num">{{dataForm.adgroup.audience.length}}</div>
        </div>
        <template v-if="subFrom.crea_type==1">
            <svg width="20" height="21" class="count_icon" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g opacity="0.5">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 5.08333L15.4167 3L10 8.41667L4.58336 3L2.50003 5.08333L7.9167 10.5L2.50003 15.9167L4.58336 18L10 12.5833L15.4167 18L17.5 15.9167L12.0834 10.5L17.5 5.08333Z" fill="#165DFF" />
                </g>
            </svg>
            <div class="count_box flexbox flexcolumn flexjust">
                <div class="count_title">创意素材</div>
                <div class="count_num">{{getMaxLength}}</div>
            </div>
        </template>
        <svg width="20" height="21" class="count_icon" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g opacity="0.5">
                <rect x="2" y="5.5" width="16" height="3" fill="#165DFF" />
                <rect x="2" y="12.5" width="16" height="3" fill="#165DFF" />
            </g>
        </svg>
        <div class="count_box count_box_blue flexbox flexcolumn flexjust">
            <div class="count_title">生成广告</div>
            <div class="count_num">{{getPlanAll}}</div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["dataForm", "subFrom"],
    components: {},
    name: "",
    data() {
        return {
            noset: "",
        };
    },
    created() {},
    computed: {
        getMaxLength() {
            let list = this.dataForm.creatives_base.creatives_class;
            let num = 0;
            for (let i in list) {
                num += list[i].creatives.length;
            }
            return num;
        },
        getPlanAll() {
            let all = null;
            all =
                this.dataForm.advertiser_ids.length *
                this.dataForm.adgroup.delivery.length *
                this.dataForm.adgroup.audience.length *
                this.getMaxLength;
            return all;
        },
    },
    methods: {
        sessionSave() {
            this.$emit("sessionSave");
        },
    },
};
</script>


<style scoped>
.count_box {
    width: 160px;
    height: 75px;
    box-sizing: border-box;
    padding: 0 20px;
    background: rgba(68, 117, 255, 0.05);
    border-radius: 6px;
}
.count_title {
    font-size: 12px;
    color: #616c85;
    line-height: 17px;
}
.count_num {
    font-size: 20px;
    color: #17233d;
    line-height: 26px;
    margin-top: 8px;
}
.count_icon {
    margin: 0 10px;
}
.count_box_blue {
    background: #4475ff;
}
.count_box_blue .count_title,
.count_box_blue .count_num {
    color: #fff;
}
</style>

